<template>
	<el-popover placement="bottom-end" width="501" trigger="click" v-model="visible" popper-class="select_icon_wrapper">
		<div class="select_icon_button" slot="reference">
			<i :class="selectedIcon"></i>
			<el-button type="text">选择菜单图标</el-button>
		</div>
		<div class="select_icon_filter">
			<el-input size="small" v-model="iconSearch" clearable></el-input>
			<el-button size="small" type="text" @click="handleCancelIcon">取消选择</el-button>
		</div>
		<div class="select_icon_list">
			<el-row :gutter="10" v-if="elementIcons.length > 0">
				<el-col :span="3" v-for="(item, index) in elementIcons" :key="index">
					<span @click="handleSelectIcon(item)"><i :class="item"></i></span>
				</el-col>
			</el-row>
			<div class="empty" v-else>暂无可选图标</div>
		</div>
	</el-popover>
</template>

<script>
import { elementIcons } from './elementIcon';
export default {
	props: {
		value: String
	},
	data() {
		return {
			visible: false,
			elementIcons: [],
			selectedIcon: this.value,
			iconSearch: ''
		};
	},
	watch: {
		value(val) {
			this.selectedIcon = val;
		},
		selectedIcon(val) {
			this.$emit('input', val);
		},
		iconSearch(val) {
			this.elementIcons = elementIcons.filter((item) => item.indexOf(val) !== -1);
		}
	},
	mounted() {
		this.elementIcons = elementIcons;
	},
	methods: {
		handleSelectIcon(icon) {
			this.visible = false;
			this.selectedIcon = icon;
		},

		//取消选择图标
		handleCancelIcon() {
			this.visible = false;
			this.selectedIcon = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.select_icon_button {
	display: inline-block;
	i {
		float: left;
		width: 34px;
		height: 34px;
		font-size: 24px;
		line-height: 34px;
		text-align: center;
		border: solid 1px #ccc;
	}
	.el-button {
		color: #606266;
		padding: 10px;
	}
}
.select_icon_filter {
	display: flex;
	padding: 10px;
	border-bottom: solid 1px #ccc;
	.el-button {
		margin-left: 15px;
	}
}
.select_icon_list {
	max-height: 300px;
	padding: 10px 10px 0;
	overflow-y: auto;
	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 5px;
		transition: color 0.2s ease;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.el-col {
		margin-bottom: 10px;
		span {
			display: block;
			padding: 10px;
			line-height: 1;
			font-size: 28px;
			border-radius: 5px;
			border: solid 1px #ccc;
			cursor: pointer;
		}
	}
	.empty {
		text-align: center;
		padding: 5px 0 15px;
	}
}
</style>
<style>
.select_icon_wrapper {
	padding: 0;
}
</style>
